<!DOCTYPE html>
<html lang="en">
<!-- 导航内容不是循环渲染的,这样好改地址 -->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品列表</title>

  <!-- 轮播图 -->
  <link rel="stylesheet" href="./bil/ByThePlugin/styles/slider.css">
  <!-- 字体图标 -->
  <link rel="stylesheet" href="./bil/iconfont/iconfont.css">
  <!-- 自己的css -->
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/product_list.css">
  <!-- js库 -->
  <script src="./bil/jquery-1.11.3/jquery.js"></script>

</head>

<body>
  <!-- 头部 -->
  <div id="head">
    <!-- 顶部导航-->
    <div class="topNav">
      <div class="container clearfix">
        <div class="topnav-url fl clearfix">
          <span>legochina.cn</span>
        </div>
        <!-- 登录注册 -->
        <div class="link-login fr">
          欢迎光临乐购,请<a class="register" href="#"> 登陆</a>\
          <a class="login" href="#">注册</a>
        </div>
      </div>
    </div>
    <!-- 购物车和我的订单 -->
    <div class="container clearfix">
      <div class="shop">
        <div class="search">
          <input type="text" placeholder="搜索">
          <span class="search-btn"></span>
        </div>
        <span class="shopping-cart">
          <span class="shopping-logo"></span>
          <a href="#">购物车</a>
          <span>0</span>
        </span>
        <span class="my-order">
          <a href="#">我的订单</a>
        </span>
      </div>
      <!-- 导航 -->
      <div class="nav">
        <img src="./img/LOGO_02.jpg" alt="">
        <div class="content">
          <!-- 渲染的内容 ,这个是直接写的主要是不好改a标签的地址-->
          <a href="./index.html">首页</a>
          <a href="#">图书</a>
          <a href="#">图书</a>
          <a href="#">图书</a>
          <a href="#">图书</a>
          <a href="#">图书</a>
          <a href="#">图书</a>
          <a href="#">图书</a>
          <a href="#">图书</a>
          <a href="#">图书</a>
          <a href="#">图书</a>
          <a href="#">图书</a>
        </div>
      </div>
    </div>
  </div>

  <!-- 商品分类 -->
  <div class="container" id="goodsCategory">
    <!--轮播开始-->
    <div class="goods-category-banner pptbox" id="bannerInner">
      <!--轮播的内容-->
      <ul class="innerwrapper">
        <li>
          <a href="#"><img src="./img/banner01.jpg" /></a>
        </li>
        <li>
          <a href="#"><img src="./img/banner02.jpg" /></a>
        </li>
        <li>
          <a href="#"><img src="./img/banner03.jpg" /></a>
        </li>
        <li>
          <a href="#"><img src="./img/banner04.jpg" /></a>
        </li>
        <li>
          <a href="#"><img src="./img/banner05.jpg" /></a>
        </li>
      </ul>
      <!--数字控制器-->
      <ul class="pagination controls">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
      <!--按钮控制器-->
      <span class="btnleft"></span>
      <span class="btnright"></span>
    </div>
    <div class="goodsCategory-rigth">
      <h2>热卖畅销</h2>
      <ul class="content">
        <!-- 渲染的内容 -->
      </ul>
    </div>
    <div class="goodsCategory-below">
      <img src="./img/product_list _02.jpg" alt="">
    </div>
  </div>

  <!-- 乐购·图书折扣区 -->
  <div class="container" id="discount">
    <div>
      <h2 class="titlecss ">乐购·图书折扣区</h2>
    </div>
    <div class="discount-content">
      <ul class="flexbetween content">
        <!-- 循环渲染 -->
      </ul>
    </div>
  </div>

  <!-- 图书 电子书 -->
  <div class="container books floor-box" id="books">
    <div class="books-classify">
      <div class="books-title titlecss titlespan">
        <h2><span>新</span>书上架</h2>
      </div>
      <div class="books-details flexbetween">
        <div class="details-left">
          <ul class="flexbetween content3">
            <!-- 渲染的内容 -->
          </ul>
        </div>
        <div class="details-right content1 shower">
          <!-- 渲染的内容 -->
        </div>
      </div>
    </div>
    <div class="new-book">
      <h2>主编推荐</h2>
      <div class="content2">
        <!-- 渲染内容 -->
      </div>
    </div>
  </div>

  <!-- 独家提供 -->
  <div class="container ez-webSite-cms">
    <div class="flexbetween titlecss">
      <div class="titlespan">
        <h2><span>独</span>家提供</h2>
      </div>
      <div class="flexbetween">
        <p>货币金融</p>
        <p>社会文学</p>
        <p>科学技术</p>
        <p>儿童文学</p>
        <p>教学参辅</p>
        <p>生活</p>
        <p>小说</p>
      </div>
    </div>
    <div>
      <!--轮播开始-->
      <div class="goods-category-banner pptbox bannerInner1">
        <!--轮播的内容-->
        <ul class="innerwrapper">
          <li>
            <ul class="parcel-content flexbetween">
              <li>
                <img src="./img/product_list _04.jpg" alt="">
                <p class="discount-title">8折 <span class="triangle"></span></p>
                <p>白夜行 东野上吾</p>
                <p class="recommend original-cost">推荐：
                  <img src="./img/wuxing.png" alt="">
                </p>
                <p><span class="original-cost">￥:38</span><span class="original-price">￥:58</span></p>
              </li>
              <li>
                <img src="./img/product_list _04.jpg" alt="">
                <p class="discount-title">8折 <span class="triangle"></span></p>
                <p>白夜行 东野上吾</p>
                <p class="recommend original-cost">推荐：
                  <img src="./img/wuxing.png" alt="">
                </p>
                <p><span class="original-cost">￥:38</span><span class="original-price">￥:58</span></p>
              </li>
              <li>
                <img src="./img/product_list _04.jpg" alt="">
                <p class="discount-title">8折 <span class="triangle"></span></p>
                <p>白夜行 东野上吾</p>
                <p class="recommend original-cost">推荐：
                  <img src="./img/wuxing.png" alt="">
                </p>
                <p><span class="original-cost">￥:38</span><span class="original-price">￥:58</span></p>
              </li>
              <li>
                <img src="./img/product_list _04.jpg" alt="">
                <p class="discount-title">8折 <span class="triangle"></span></p>
                <p>白夜行 东野上吾</p>
                <p class="recommend original-cost">推荐：
                  <img src="./img/wuxing.png" alt="">
                </p>
                <p><span class="original-cost">￥:38</span><span class="original-price">￥:58</span></p>
              </li>
              <li>
                <img src="./img/product_list _04.jpg" alt="">
                <p class="discount-title">8折 <span class="triangle"></span></p>
                <p>白夜行 东野上吾</p>
                <p class="recommend original-cost">推荐：
                  <img src="./img/wuxing.png" alt="">
                </p>
                <p><span class="original-cost">￥:38</span><span class="original-price">￥:58</span></p>
              </li>
              <li>
                <img src="./img/product_list _04.jpg" alt="">
                <p class="discount-title">8折 <span class="triangle"></span></p>
                <p>白夜行 东野上吾</p>
                <p class="recommend original-cost">推荐：
                  <img src="./img/wuxing.png" alt="">
                </p>
                <p><span class="original-cost">￥:38</span><span class="original-price">￥:58</span></p>
              </li>
              <li>
                <img src="./img/product_list _04.jpg" alt="">
                <p class="discount-title">8折 <span class="triangle"></span></p>
                <p>白夜行 东野上吾</p>
                <p class="recommend original-cost">推荐：
                  <img src="./img/wuxing.png" alt="">
                </p>
                <p><span class="original-cost">￥:38</span><span class="original-price">￥:58</span></p>
              </li>
            </ul>
            <ul class="parcel-content distance flexbetween">
              <li>
                <img src="./img/product_list _04.jpg" alt="">
                <p class="discount-title">8折 <span class="triangle"></span></p>
                <p>白夜行 东野上吾</p>
                <p class="recommend original-cost">推荐：
                  <img src="./img/wuxing.png" alt="">
                </p>
                <p><span class="original-cost">￥:38</span><span class="original-price">￥:58</span></p>
              </li>
              <li>
                <img src="./img/product_list _04.jpg" alt="">
                <p class="discount-title">8折 <span class="triangle"></span></p>
                <p>白夜行 东野上吾</p>
                <p class="recommend original-cost">推荐：
                  <img src="./img/wuxing.png" alt="">
                </p>
                <p><span class="original-cost">￥:38</span><span class="original-price">￥:58</span></p>
              </li>
              <li>
                <img src="./img/product_list _04.jpg" alt="">
                <p class="discount-title">8折 <span class="triangle"></span></p>
                <p>白夜行 东野上吾</p>
                <p class="recommend original-cost">推荐：
                  <img src="./img/wuxing.png" alt="">
                </p>
                <p><span class="original-cost">￥:38</span><span class="original-price">￥:58</span></p>
              </li>
              <li>
                <img src="./img/product_list _04.jpg" alt="">
                <p class="discount-title">8折 <span class="triangle"></span></p>
                <p>白夜行 东野上吾</p>
                <p class="recommend original-cost">推荐：
                  <img src="./img/wuxing.png" alt="">
                </p>
                <p><span class="original-cost">￥:38</span><span class="original-price">￥:58</span></p>
              </li>
              <li>
                <img src="./img/product_list _04.jpg" alt="">
                <p class="discount-title">8折 <span class="triangle"></span></p>
                <p>白夜行 东野上吾</p>
                <p class="recommend original-cost">推荐：
                  <img src="./img/wuxing.png" alt="">
                </p>
                <p><span class="original-cost">￥:38</span><span class="original-price">￥:58</span></p>
              </li>
              <li>
                <img src="./img/product_list _04.jpg" alt="">
                <p class="discount-title">8折 <span class="triangle"></span></p>
                <p>白夜行 东野上吾</p>
                <p class="recommend original-cost">推荐：
                  <img src="./img/wuxing.png" alt="">
                </p>
                <p><span class="original-cost">￥:38</span><span class="original-price">￥:58</span></p>
              </li>
              <li>
                <img src="./img/product_list _04.jpg" alt="">
                <p class="discount-title">8折 <span class="triangle"></span></p>
                <p>白夜行 东野上吾</p>
                <p class="recommend original-cost">推荐：
                  <img src="./img/wuxing.png" alt="">
                </p>
                <p><span class="original-cost">￥:38</span><span class="original-price">￥:58</span></p>
              </li>
            </ul>
          </li>
        </ul>
        <!--数字控制器-->
        <ul class="pagination controls">
          <li class="current"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <!--按钮控制器-->
        <span class="btnleft"></span>
        <span class="btnright"></span>
      </div>
    </div>
  </div>

  <!-- 猜你喜欢-->
  <div class="container" id="promotionOfGoods">
    <div class="title flexbetween titlecss">
      <div class="titlespan">
        <h2><span>猜</span>你喜欢</h2>
      </div>
      <div class="flexbetween">
        <div class="switchover iconfont icon-ziyuan"><span>换一批</span></div>
        <p class="on"></p>
        <p></p>
      </div>
    </div>
    <div class="goods-content">
      <div class="promotion-content show-hidden">
        <ul class="flexbetween content">
          <!-- 渲li -->
        </ul>
        <!-- 渲染ul -->
      </div>
      <div class="content2 show show-hidden">
        <!--渲染的内容 -->
      </div>
    </div>
  </div>

  <!-- 尾部图片 -->
  <div class="footer-img container">
    <div class="footer-img-classify content flexbetween">
      <!-- 渲染的内容 -->
    </div>
    <div>
      <img src="./img/product_list _02.jpg" alt="">
    </div>
  </div>

  <!-- 楼层跳转 -->
  <div class="floor">
    <ul>
      <li data-bgc="#93d46f">图书</li>
      <li data-bgc="#f65727">服装</li>
      <li data-bgc="#ff7394">运动</li>
      <li data-bgc="#bb9dee">童装</li>
      <li data-bgc="#c2ec51">家居</li>
    </ul>
    <p class="tophead iconfont icon-30"></p>
  </div>

  <!-- 固定顶部搜索框 -->
  <div class="fix-top"></div>

  <!-- 尾部 -->
  <div id="footer">
    <div class="footer-nav">
      <div class="container service clearfix">
        <div class="fl genuine">
          <img src="./img/footer_03.jpg" alt="">
          <span>
            正规渠道正品保障
          </span>
        </div>
        <div class="fl">
          <img src="./img/footer_05.jpg" alt="">
          <span>
            放心购物货到付款
          </span>
        </div>
        <div class="fl">
          <img class="arrive" src="./img/footer_07.jpg" alt="">
          <span>
            625城市次日到达
          </span>
        </div>
        <div class="fl">
          <img src="./img/footer_09.jpg" alt="">
          <span>
            上门退货当面退款
          </span>
        </div>
      </div>
      <!-- 帮助 -->
      <div class="container">
        <div class="clearfix help">
          <!-- 购物指南 -->
          <ul class="shopping-guide fl">
            <li>
              <h4>购物指南</h4>
            </li>
            <li>
              <a href="#">购物流程</a>
            </li>
            <li>
              <a href="#">发票制度</a>
            </li>
            <li>
              <a href="#">账户管理</a>
            </li>
            <li>
              <a href="#">会员优惠</a>
            </li>
          </ul>
          <!-- 支付方式 -->
          <ul class="fl">
            <li>
              <h4>支付方式</h4>
            </li>
            <li>
              <a href="#">货到付款</a>
            </li>
            <li>
              <a href="#">网上支付</a>
            </li>
            <li>
              <a href="#">礼品卡支付</a>
            </li>
            <li>
              <a href="#">银行转帐</a>
            </li>
          </ul>
          <!-- 订单服务 -->
          <ul class="fl">
            <li>
              <h4>订单服务</h4>
            </li>
            <li>
              <a href="#">订单配送查询</a>
            </li>
            <li>
              <a href="#">订单状态说明</a>
            </li>
            <li>
              <a href="#">自助取消订单</a>
            </li>
            <li>
              <a href="#">自助修改订单</a>
            </li>
          </ul>
          <!-- 退换货 -->
          <ul class="fl">
            <li>
              <h4>退换货</h4>
            </li>
            <li>
              <a href="">退换货政策</a>
            </li>
            <li>
              <a href="">自助申请退换货</a>
            </li>
            <li>
              <a href="">退换货进度查询</a>
            </li>
            <li>
              <a href="">退款方式和时间</a>
            </li>
          </ul>
          <!-- 商家服务 -->
          <ul class="fl">
            <li>
              <h4>商家服务</h4>
            </li>
            <li>
              <a href="#">商家中心</a>
            </li>
            <li>
              <a href="#">运营服务</a>
            </li>
            <li>
              <a href="#">加入尾品汇</a>
            </li>
          </ul>
          <!-- 尾部logo -->
          <div class="footer_logo  fl">
            <img src="./img/logo_00.png" alt="">
          </div>
        </div>
      </div>
      <!-- 链接 -->
      <div class="copyright_links">
        <ul>
          <li>
            <a href="#">公司简介</a><span class="copyright_split">|</span>
          </li>
          <li>
            <a href="#">Investor Relations</a><span class="copyright_split">|</span>
          </li>
          <li>
            <a href="#">网站联盟</a><span class="copyright_split">|</span>
          </li>
          <li>
            <a href="#">乐购招商</a><span class="copyright_split">|</span>
          </li>
          <li>
            <a href="#">机构销售</a><span class="copyright_split">|</span>
          </li>
          <li>
            <a href="#">手机乐购</a><span class="copyright_split">|</span>
          </li>
          <li>
            <a href="#">官方Blog</a><span class="copyright_split">|</span>
          </li>
          <li>
            <a href="#">热词搜索</a>
          </li>
        </ul>
      </div>
      <!--  版权  -->
      <div class="copyright_cert">Copyright (C) 乐购网 2004-2016, All Rights Reserved</div>
    </div>
  </div>

  <!-- 轮播图 -->
  <script src="./bil/ByThePlugin/javascripts/slider.js"></script>

  <!-- 自己写的js -->
  <script src="./js/product_list.js"></script>

</body>

</html>